<template>
	<view class="image-list">
		<view class="">
			<view class="" v-if="current==0">
				<view class="" style="padding: 0rpx 0rpx;">
					<tn-waterfall ref="waterfall" v-model="list" @finish="handleWaterFallFinish">
						<template v-slot:left="{ leftList }">
							<view v-for="(item, index) in leftList" :key="item.id" class="product__item"
								@tap="open_atlas(item.id)">
								<view class="up-body-left">
									<view class="item__image">
										<tn-lazy-load :threshold="-450" height="100%" :image="item.picture.url"
											:index="item.id" imgMode="widthFix"></tn-lazy-load>
									</view>
									<view class="item__title-container">
										<text class="item__title tn-color-cat">{{ item.picture.title }}</text>
									</view>
									<view v-if="item.tag_zh && item.tag_zh.length > 0" class="item__tags-container">
										<view v-for="(tagItem, tagIndex) in item.tag_zh" :key="tagIndex"
											class="item__tag">{{ tagItem.text }}</view>
									</view>
								</view>
								<view class="item__data">
									<view class="container">
										<view class="avatar"
											:style="'background-image:url('+ item.user.avatar +');width: 40rpx;height: 40rpx;background-size: cover;'">
										</view>
										<view class="info tn-color-gray tn-text-sm">
											<view class="username ">{{ item.user.nickname }}</view>
											<view class="followers">
												<text class="tn-icon-image tn-color-gray tn-padding-right-xs"></text>
												<text class="tn-color-gray">{{ item.total }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{ rightList }">
							<view v-for="(item, index) in rightList" :key="item.id" class="product__item"
								@click="open_atlas(item.id)">
								<view class="up-body-right">
									<view class="item__image">
										<tn-lazy-load :threshold="-450" height="100%" :image="item.picture.url"
											:index="item.id" imgMode="widthFix"></tn-lazy-load>
									</view>
									<view class="item__title-container">
										<text class="item__title tn-color-cat">{{ item.picture.title }}</text>
									</view>
									<view class="item__tags-container">
										<view v-for="(tagItem, tagIndex) in item.tag_zh" :key="tagIndex"
											class="item__tag">{{ tagItem.text }}</view>
									</view>
								</view>
								<view class="item__data">
									<view class="container">
										<view class="avatar"
											:style="'background-image:url('+ item.user.avatar +');width: 40rpx;height: 40rpx;background-size: cover;'">
										</view>
										<view class="info tn-color-gray tn-text-sm">
											<view class="username ">{{ item.user.nickname }}</view>
											<view class="followers">
												<text class="tn-icon-image tn-color-gray tn-padding-right-xs"></text>
												<text class="tn-color-gray">{{ item.total }}</text>
											</view>
										</view>
									</view>

								</view>
							</view>
						</template>
					</tn-waterfall>
				</view>
				<tn-load-more :status="loadStatus"></tn-load-more>
			</view>

			<view class="" v-if="current==1">
				<view class="" style="padding: 10vh 20rpx;">
					<view class="tn-text-center" style="font-size: 200rpx;padding-top: 30rpx;">
						<text class="tn-icon-wea-wind tn-color-gray--light"></text>
					</view>
					<view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容被台风吹走了</view>
				</view>
			</view>

			<view class="" v-if="current==2">
				<view class="" style="padding: 10vh 20rpx;">
					<view class="tn-text-center" style="font-size: 200rpx;padding-top: 30rpx;">
						<text class="tn-icon-wea-wind tn-color-gray--light"></text>
					</view>
					<view class="tn-color-gray--disabled tn-text-center tn-text-lg">内容被台风吹走了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		forEach
	} from '../../tuniao-ui/libs/luch-request/utils';
	export default {
		name: 'imageList',
		data() {
			return {
				test_text: [
					'a',
					'b'
				],
				current: 0,
				/* 瀑布流*/
				loadStatus: 'loadmore',
				list: [],
				pages: 0,
				more: true,
				data: [{
					// 这应该是查询图集数据库 atlas
					"title": "白衣服的女人白衣服的女人白衣服的女人白衣服的女人白衣服的女人白衣服的女人白衣服的女人白衣服的女人",
					"user": {
						"nickname": "用户昵称用户昵称用用户昵称用户昵称用用户昵称用户昵称用c",
						// 我觉得应该加密
						"id": "1",
						"avatar": "https://cdn1.zhizhucms.com/materials/image/744/2023/3/31/1680226756591_697.jpeg"
					},
					// 封面图的ID
					"cover_id": "1",
					// 随机取一个
					"picture": [{
						"url": "https://cdn1.zhizhucms.com/materials/image/744/2023/3/31/1680226756591_697.jpeg",
						"title": "这里是图片标题",
						"describe": "这是一段长一点的描述"
					}],
					// 图集标签 应该是交集 并且建议人工
					"atlas_tag": [{
							"name": "1女孩",
							"weight": 1
						},
						{
							"name": "测试场景",
							"weight": 1
						}, {
							"name": "某某某某某某某",
							"weight": 1
						},
					],
					"tag_zh": [{
							"text": "1女孩",
							"weight": 1
						},
						{
							"text": "测试场景",
							"weight": 1
						}, {
							"text": "某某某某某某某",
							"weight": 1
						},

					],
					// clip 推理的标签合集
					"clip_tag": [{
						"name": "test",
						"weight": 1
					}],
					"Deepbooru_tag": [{
						"name": "test",
						"weight": 1
					}],
					"ali_audit": [{
						"label": "pornographic_adultContent",
						"weight": 1
					}],
					// 图片数量
					"total": 9,
					"status": "normal",
					"type": "ai",
					"id": "tsfjG2VXhyLYomhAGEvJed1oYfCl8Np0",
					"rank": 0,
					"views": 99
				}, {
					// 这应该是查询图集数据库 atlas
					"title": "白衣服的女人",
					"user": {
						"nickname": "用户昵称",
						// 我觉得应该加密
						"id": "1",
						"avatar": "https://cdn1.zhizhucms.com/materials/image/744/2023/3/31/1680226756591_697.jpeg"
					},
					// 封面图的ID
					"cover_id": "1",
					// 随机取一个
					"picture": [{
						"url": "https://cdn1.zhizhucms.com/materials/image/744/2023/3/31/1680226741811_118.png",
						"title": "这里是图片标题",
						"describe": "这是一段长一点的描述"
					}],
					// 图集标签 应该是交集 并且建议人工
					"atlas_tag": [{
							"name": "1gril",
							"weight": 1
						},
						{
							"name": "huanggong",
							"weight": 1
						}
					],
					"tag_zh": [{
							"text": "1女孩",
							"weight": 1
						},
						{
							"text": "测试场景",
							"weight": 1
						}, {
							"text": "某某某某某某某",
							"weight": 1
						}

					],
					// clip 推理的标签合集
					"clip_tag": [{
						"name": "test",
						"weight": 1
					}],
					"Deepbooru_tag": [{
						"name": "test",
						"weight": 1
					}],
					"ali_audit": [{
						"label": "pornographic_adultContent",
						"weight": 1
					}],
					// 图片数量
					"total": 9,
					"status": "normal",
					"type": "ai",
					"id": "tsfjG2VXhyLYomhAGEvJed1oYfCl8Np0",
					"rank": 0,
					"views": 99
				}, ],
			}
		},
		created() {
			this.$tn.http.post('/api/atlas/getList').then(res => {
				this.pushList(res)
			}).catch(err => {
				console.error('err', err)
				/* 瀑布流*/
				this.getRandomData()
				uni.showModal({
					content: '服务器已关闭或失联，已用虚数据填充',
				})
			});
		},
		methods: {
			// 跳转
			open_atlas(e) {
				uni.navigateTo({
					url: '/pages/moyi/Preview?id=' + e,
				});
			},
			// 填充请求
			fillList() {
				this.list.push(list)
			},

			// 填充请求
			pushList(res) {
				if (res.more == 0) {
					console.log('')
					this.loadStatus = 'nomore'
				}
				this.more = res.more
				this.pages = res.pages
				forEach(res.list, (item) => {
					this.list.push(item)
				})
			},
			// 页面滑倒底部
			pageScrollLower() {
				console.log('this.loadStatus', this.loadStatus)
				if (this.loadStatus != 'nomore') {
					this.loadStatus = 'loading'
					this.$tn.http.post('/api/atlas/getList', {
						pages: this.pages
					}).then(res => {
						console.log('res', res);
						this.pushList(res)
					}).catch(err => {
						console.error('err', err)
						uni.showModal({
							content: 'X_X',
						})
					});
				}
			},
			/* 瀑布流*/
			// 获取随机数据
			getRandomData() {
				console.log(13);
				this.loadStatus = 'loading'
				for (let i = 0; i < 10; i++) {
					let index = this.$tn.number.randomInt(0, this.data.length - 1)
					let item = JSON.parse(JSON.stringify(this.data[index]))
					item.id = this.$tn.uuid()
					this.list.push(item)
				}
			},
			// 瀑布流加载完毕事件
			handleWaterFallFinish() {
				if (this.loadStatus != 'nomore') {
					this.loadStatus = 'loadmore'
				}
			},
			// 获取价格整数和小数部分
			getPrice(price) {
				const priceStr = String(price)
				if (priceStr.indexOf('.') !== -1) {
					return priceStr.split('.')
				} else {
					return [priceStr, '00']
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.up-body-left {
		margin: 10rpx 5rpx 0 10rpx;
	}

	.up-body-right {
		margin: 10rpx 10rpx 0 5rpx;
	}

	.container {
		width: 50vw;
		display: flex;
		align-items: center;
	}

	.avatar {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		width: 40rpx;
		flex-shrink: 0;
		height: 40rpx;
		border-radius: 50%;
		background-color: gray;
		margin: 0 10rpx;
	}

	.info {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 1;
		overflow: hidden;
	}

	.username {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.followers {
		white-space: nowrap;
		padding-right: 20rpx
	}

	.image-list {
		background-color: black;
		max-height: 100vh;
	}

	.tn-tabbar-height {
		min-height: 20rpx;
		height: calc(40rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 图标容器5 start */
	.icon5 {
		&__item {
			// width: 30%;
			// background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 0rpx;
			margin: 0rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;
			}
		}
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 330rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 15rpx;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		// overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -160rpx;
		text-align: center;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -220rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		// background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -70rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		// background-color: #FFFFFF;
	}


	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 50rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				// color: #AAAAAA;
			}
		}
	}

	.logo-image2 {
		width: 65rpx;
		height: 65rpx;
		position: relative;
	}

	.logo-pic2 {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */


	/* 胶囊banner*/
	.image-capsule {
		padding: 100rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-piccapsule {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	/* 用户头像 start */
	.logo-image {
		width: 40rpx;
		height: 40rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 1rpx solid rgba(255, 255, 255, 0.05);
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 瀑布流*/
	.product__item {
		// background-color: #FFFFFF;
		overflow: hidden;
		// margin: 0 10rpx;
		margin-bottom: 10rpx;
		// box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);

		.item {

			// padding: 40rpx;
			/* 图片 start */
			&__image {
				width: 100%;
				height: auto;
				background-color: #FFFFFF;
				// border: 1rpx solid #F8F7F8;
				border-radius: 10rpx;
				overflow: hidden;
			}

			/* 图片 end */

			/* 内容 start */
			&__data {
				padding: 0 0 14rpx 0rpx;
			}

			/* 标题 start */
			&__title-container {
				padding: 10rpx 0 0rpx 0;
				color: #DDDDDD;
				text-align: justify;
				line-height: 38rpx;
				vertical-align: middle;
			}

			&__store-type {
				height: 28rpx;
				font-size: 20rpx;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 4rpx;
				border-radius: 6rpx;
				white-space: nowrap;
				text-align: center;
				top: -2rpx;
				margin-right: 6rpx;
			}

			&__title {
				word-break: break-all;
				font-size: 30rpx;
			}

			/* 标题 end */

			/* 标签 start */
			&__tags-container {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;
			}

			&__tag {
				margin: 10rpx;
				color: #dddddd;
				// background-color: #F3F2F7;
				border: 1rpx solid #F8F7F8;
				padding: 4rpx 14rpx 6rpx;
				border-radius: 10rpx;
				font-size: 20rpx;

				&:first-child {
					// margin-left: 0rpx !important;
				}
			}

			/* 标签 end */

			/* 价格 start */
			&__price-container {
				font-size: 24rpx;
				color: #E83A30;
				font-weight: bold;
			}

			&__price {
				&--unit {}

				&--integer {
					font-size: 38rpx;
				}

				&--decimal {}
			}

			/* 价格 end */
			/* 内容 end */
		}
	}
</style>